<template>
	<view>
		<view class="slider-container">
			<view class="slider-track" style="width: 460upx"></view>
			<view class="slider-thumb" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd"
				:style="{ left: thumbPosition + 'px' }">
				<image v-if="verified" src="../../static/check.png"/>
				<image v-else src="../../static/right.png"/>
			</view>
			<view v-if="verified" class="message verified-message">验证成功！</view>
			<view v-else class="message tip-message">向右滑动验证</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		name:"wq-verify",
		data() {
			return {
				trackWidth: 230, // 滑动区域宽度
				thumbPosition: 0, // 滑块滑动距离
				maxThumbPosition: uni.upx2px(460)-40, // trackWidth - thumbWidth (假设thumb宽度为50px)
				verified: false, // 是否验证成功
			};
		},
		methods:{
			//  触摸开始事件处理
			onTouchStart(event) {
				this.startX = event.touches[0].clientX; 
			},
			// 触摸移动事件处理
			onTouchMove(event) {
				// 如果还没有验证成功
				if (!this.verified) {
					// 计算滑动距离
					const moveX = event.touches[0].clientX - this.startX;
					// 确保滑块在有效范围内移动
					if (moveX > 0 && moveX <= this.maxThumbPosition) {
						this.thumbPosition = Math.ceil(moveX);
					}else{
						this.thumbPosition = this.maxThumbPosition;
						this.verified = true;
						// 完成验证
						console.log('succes');
						this.$emit('blockSuccess',true);
						
					}
				}
			},
			 // 触摸结束事件处理
			onTouchEnd() {
				if (!this.verified) {
					// 验证失败，归位
					this.thumbPosition = 0;
				}
			},
			 // 重置
			reset(){
				this.thumbPosition = 0;
				this.verified = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	$slider-height: 40px;
	
	.page{
		width: 100vw;
		
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.slider-container {
		position: relative;
		width: 460upx;
		height: $slider-height;
		border: 1px solid #ccc;
		border-radius: 5px;
		overflow: hidden;
		
		.slider-track {
			position: absolute;
			top: 0;
			left: 0;
			height: $slider-height;
			background-color: #eee;
		}
		
		.slider-thumb {
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: 0;
			left: 0;
			width: 40px;
			height: $slider-height;
			background-color: #fff;
			color: white;
			text-align: center;
			line-height: $slider-height;
			cursor: pointer;
			border-radius: 5px;
			z-index: 2;
			
			image{
				width: 30px;
				height: 30px;
			}
		}
		
		.message{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: $slider-height;
			color: white;
			text-align: center;
			line-height: $slider-height;
		}
		
		.verified-message {
			background-color: #004ea2;
		}
		
		.tip-message{
			background-color: #ccc;
		}
	}

	.btn{
		width: 440upx;
		margin-top: 30px;
	}
</style>